<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>文件资源管理</title>
    <!-- 引入样式 -->
    <!--<link rel="stylesheet" href="/plugins/elementui/index.css">-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <style>
        body, html {
            height: 100%;
        }

        .el-aside {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 50px;
        }

        .el-upload-list {
            margin-top: 56px;
        }

        .submit-button {
            display: flex;
            justify-content: center;
            margin-top: 15px;
            transform: translateX(-5px)
        }

        .el-table {
            margin: 15px 0;
        }
    </style>
</head>
<body>

<div id="app" style="height: 100%;">
    <el-container style="height: 100%;">

        <el-aside width="400px">
            <el-upload
                    style="width: 360px;height: 180px"
                    class="upload-demo"
                    ref="upload"
                    :action="requestPath"
                    drag
                    :on-success="uploadSuccess"
                    :auto-upload="false">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
            <div class="submit-button">
                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器
                </el-button>
            </div>
        </el-aside>

        <el-main>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输入内容"
                              v-model="getListParams.query"
                              clearable
                              @clear="getTaleData"
                    >
                        <el-button slot="append" icon="el-icon-search"
                                   @click="getTaleData"
                        ></el-button>
                    </el-input>
                </el-col>
            </el-row>

            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column type="index" width="180" label="#">
                </el-table-column>
                <el-table-column
                        prop="fileName"
                        label="文件名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="type"
                        label="类型"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="上传时间">
                </el-table-column>

                <el-table-column
                        prop="ip"
                        label="上传ip地址">
                </el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="{row}">
                        <el-button type="primary"
                                   @click="download(row)"
                                   icon="el-icon-download" size="mini">下载
                        </el-button>
                        <el-button type="danger"
                                   @click="deleteFile(row)"
                                   icon="el-icon-delete" size="mini">删除
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>

            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="paginationParams.currentPage"
                    :page-sizes="paginationParams.pageSizes"
                    :page-size="paginationParams.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="paginationParams.total">
            </el-pagination>
        </el-main>
    </el-container>
</div>
</body>
<script src="js/vue.js"></script>
<script src="plugins/elementui/index.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script type="text/javascript">
    Vue.prototype.$http = axios
    new Vue({
        el: '#app',
        data: {
            requestPath: '/uploadFile',
            tableData: [
                {
                    id: '9c548872-f819-476d-a3d6-8d674014468b',
                    fileName: '5bf2a5f60e0cd.jpg',
                    type: 'jpg',
                    createTime: '2021-05-12 00:36:08',
                    ip: '',
                    path: 'D:\\\\project\\\\meinian\\\\webResourceManager\\\\src\\\\main\\\\resources\\\\static\\\\resource/68ea0e7a-2f9f-4026-ae0a-8ff7a3be89e7_5bf2a5f60e0cd.jpg'
                }
            ],
            paginationParams: {
                total: 0,
                currentPage: 1,
                pageSizes: [5, 10, 20, 50],
                pageSize: 5
            },
            getListParams: {
                query: '',
                pagenum: 1,
                pageSize: 5
            }

        },
        methods: {
            submitUpload() {
                this.$refs.upload.submit();
            },
            uploadSuccess(response) {
                if (response.flag) {
                    this.$message.success(response.message)
                    //到最后一页去

                    this.getListParams.pagenum = Math.ceil((this.paginationParams.total + 1) / this.getListParams.pageSize)

                    this.getTaleData()
                } else {
                    this.$message.error(response.message)
                }
            },
            getTaleData() {

                this.$http.get('/getWebFileList', {
                    params: this.getListParams
                }).then(res => {
                    //不明白created函数返回的请求体，不一样
                    // console.log(res)
                    let temp = res
                    if (res.data) {
                        temp = res.data
                    }

                    this.paginationParams.total = temp.total

                    this.tableData = temp.rows
                    this.paginationParams.pageSize = this.getListParams.pageSize

                    this.paginationParams.currentPage = this.getListParams.pagenum

                })
            },
            handleSizeChange(pageSize) {
                this.getListParams.pageSize = pageSize
                this.getTaleData()
            },
            handleCurrentChange(pagenum) {
                this.getListParams.pagenum = pagenum
                this.getTaleData()
            },
            deleteFile(row) {
                this.$confirm('确认删除该文件吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.delete('/deleteFile/'+row.id).then(response=>{
                        let data=response.data?response.data:response


                        if (data.flag){
                            this.$message.success(data.message);
                        }else {
                            this.$message.error(data.message);
                        }
                        //如果查询当前的页码数大于当前页数，到最后一页去

                        let last_page = Math.ceil((this.paginationParams.total - 1) / this.getListParams.pageSize)

                        if (this.getListParams.pagenum > last_page) {
                            this.getListParams.pagenum = last_page
                        }
                        this.getTaleData()
                    })
                }).catch(() => {
                    this.$message.info("已取消")
                })
            },
            download(row) {
                this.$confirm('确认下载该文件吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http({
                        url: '/download',
                        method: 'post',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                        params: {
                            path: row.path,
                            fileName: row.fileName
                        },
                        withCredentials: true,
                        responseType: "blob"
                    }).then(res => {
                        let blob = new Blob([res.data]); // { type: "application/vnd.ms-excel" }
                        let url = window.URL.createObjectURL(blob); // 创建一个临时的url指向blob对象
                        // 创建url之后可以模拟对此文件对象的一系列操作，例如：预览、下载
                        let a = document.createElement("a");
                        a.href = url;
                        let filename = "";
                        let disposition = res.headers["content-disposition"]
                        if (disposition && disposition.indexOf('attachment') !== -1) {
                            let filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
                            let matches = filenameRegex.exec(disposition);
                            if (matches != null && matches[1]) {
                                filename = matches[1].replace(/['"]/g, '');
                            }
                        }

                        filename = decodeURI(filename);
                        a.download = filename;
                        a.click();
                        // 释放这个临时的对象url
                        window.URL.revokeObjectURL(url);

                    })
                }).catch(() => {
                    this.$message.info("已取消")
                })

            }
        },
        created() {
            this.getTaleData()
        },
    })
</script>
</html>
